<template>
  <div class="bkg">
    <sui-container style="padding: 50px" text>
      <sui-grid>
        <!--头部区域-->
        <sui-grid-row centered>
          <sui-header class="title">
            <span>Anzia.Page</span>
            <sui-header-subheader class="subtitle">
              生命以负熵为食
            </sui-header-subheader>
            <sui-header-content>
              <sui-label>极简</sui-label>
              <sui-label>记录</sui-label>
              <sui-label>生活</sui-label>
            </sui-header-content>
          </sui-header>
        </sui-grid-row>

        <!--文章列表区域-->
        <sui-grid-row v-for="item in blog" :key="item.id">
          <sui-card class="raised link fluid" @click="toggle">
            <sui-card-content>
              <sui-card-header>{{ item.title }}</sui-card-header>
              <sui-card-meta>{{ item.description }}</sui-card-meta>
            </sui-card-content>
            <sui-card-content extra>
              <span slot="right">
              <sui-image
                src="https://picsum.photos/200"
                shape="circular"
                size="mini"
              />
              {{ item.date }}
            </span>
            </sui-card-content>
          </sui-card>

          <!--弹出层-->
          <sui-modal v-model="open">
            <sui-modal-header>{{ item.title }}</sui-modal-header>
            <sui-modal-content scrolling>
              <sui-modal-description>
                <sui-header>{{ item.description }}</sui-header>
                <p>随便写一下东西</p>
              </sui-modal-description>
            </sui-modal-content>
            <sui-modal-actions>
              <sui-button positive @click.native="toggle">
                OK
              </sui-button>
            </sui-modal-actions>
          </sui-modal>
        </sui-grid-row>

        <!--翻页按钮区域-->
        <sui-grid-row text-align="center">
          <sui-grid-column :width="8">
            <sui-button animated="fade" size="huge">
              <sui-button-content visible>Back</sui-button-content>
              <sui-button-content hidden>
                <sui-icon name="left arrow"/>
              </sui-button-content>
            </sui-button>
          </sui-grid-column>
          <sui-grid-column :width="8">
            <sui-button animated="fade" size="huge">
              <sui-button-content visible>Next</sui-button-content>
              <sui-button-content hidden>
                <sui-icon name="right arrow"/>
              </sui-button-content>
            </sui-button>
          </sui-grid-column>
        </sui-grid-row>
      </sui-grid>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      open: false,
      blog: [
        {
          id: '',
          title: '1',
          description: '一',
          date: '2021-05-07 星期五'
        },
        {
          title: '1',
          description: '一',
          date: '2021-05-07 星期五'
        },
        {
          title: '1',
          description: '一',
          date: '2021-05-07 星期五'
        },
        {
          title: '1',
          description: '一',
          date: '2021-05-07 星期五'
        },
        {
          title: '1',
          description: '一',
          date: '2021-05-07 星期五'
        },
        {
          title: '1',
          description: '一',
          date: '2021-05-07 星期五'
        }
      ]
    }
  },
  created () {
  },
  methods: {
    toggle () {
      this.open = !this.open
    }
  }
}
</script>

<style scoped>
.title {
  font-size: 50px !important;
  color: white !important;
}

.subtitle {
  font-size: 20px !important;
  color: white !important;
  margin-top: 10px !important;
}
</style>
